<template>
	<div>
		<table style="margin: 0px;padding: 0px;">
			<td style="margin: 0px;padding: 0px;">
				<div style="width: 400px;">
					<el-table :data="result.tableData1" ref="multipleTable1" highlight-current-row @current-change="tableSelected">
				

						<el-table-column label="序号" prop="houseId" width="50px"></el-table-column>

						<el-table-column label="管家姓名" prop="houseName" width="100px"></el-table-column>

						<el-table-column label="联系电话" prop="telephone" width="130px"></el-table-column>
					</el-table>
				</div>
			</td>
			<td width="100px" style="margin: 0px;padding: 0px; "></td>
			<td style="margin: 0px;padding: 0px; ">
				<div style="width: 400px ;">
					<el-table :data="result.tableData2" @selection-change="tableSelected2" ref="multipleTable2">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column label="序号" prop="customerId" width="50px"></el-table-column>

						<el-table-column label="客户姓名" prop="customerName" width="100px"></el-table-column>

						<el-table-column label="楼号" prop="house" width="120px"></el-table-column>

						<el-table-column label="床号" prop="bedId" width="60px"></el-table-column>
					</el-table>
				</div>
			</td>
		</table>
		<el-button type="primary " @click="save()">确定</el-button>
		<el-button type="info" @click="clearSelection()">取消</el-button>
	</div>
</template>

<script>
import axios from '@/utils/axiosutils.js';
export default {
	name: 'ServiceHouseSet',
	components: {},
	data() {
		return {
			search: {
				houseName: ''
			},
			query: {
				houseName: '',
				current: 1,
				size: 10
			},
			result: {
				tableData1: [],
				tableData2: [],
				pages: 0
			},
			showNum: 0,
			show: false,
			arry1: [],
			arry2: [],
			title: ''
		};
	},
	created() {
		this.getData1(), this.getData2();
	},
	methods: {
		getData1() {
			axios.get(
				'/serviceHouse/list',
				resp => {
					let page = resp.obj;
					this.result.tableData1 = page.records;
					this.result.total = page.total;
				},
				this.query
			);
		},
		getData2() {
			axios.get(
				'/customer/list',
				resp => {
					let page = resp.obj;
					this.result.tableData2 = page.records;
					this.result.total = page.total;
				},
				this.query
			);
		},
		tableSelected(val) {
			this.arry1 = val;
			console.log(this.arry1);
		},
		tableSelected2(val) {
			this.arry2 = val;
		},
		clearSelection() {
			this.$refs.multipleTable1.clearSelection();
			this.$refs.multipleTable2.clearSelection();
		},
		save() {
			if (this.arry1 == null || this.arry2 == null) {
				this.$message({
					message: '管家和客户不能为空',
					type: 'warning'
				});
			} else {
				let customerIds = [];

				for (var item of this.arry2) {
					customerIds.push(item.customerId);
				}

				axios.post(
					'/customer/set',
					resp => {
						this.$emit('update:show', false);
					},
					{
						houseId: this.arry1.houseId,
						customerIds: customerIds
					}
				);
			}
		}
	}
};
</script>

<style scoped>
.el-row {
	height: 60px;
}
</style>
